<template>
	<view class="retailrecords">
		<view class="navbar">
			<view :class="['navbar_item',{'active':data.activeItem == item.id}]" @click="navChange(item.id)"
				v-for="(item) in data.navList" :key="item.id">
				{{item.name}}
			</view>
		</view>
		<scroll-view :scroll-top="data.scrollTop" scroll-y="true" class="scroll_Y" @scrolltolower="lower"
			@scroll="scroll">
			<view class="scroll-view-item uni-bg-red" v-for="(item) in data.dataList" :key="item.id"
				@click.self="routerLink(item)">
				<view class="userInfo">
					<view class="user_title">
						{{item.name}}
					</view>
					<view class="time">
						<text class="name">购买日期:{{item.purchasingDate}}</text>
						<text class="phone">售药人:{{item.drugSeller}}</text>
					</view>
				</view>
				<view class="money_box">
					<view class="money">
						￥ {{(+item.actualPayment).toFixed(2)}}
					</view>
					<view :class="['status',filterClass(item.rxState)]" @click.stop="settlementFn(item)">
						{{data.activeItemName}}
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="popup" class="pay" :mask-click="false" v-if="data.infoData.rxState != undefined">
			<view class="popup-content">
				<div class="popup_title">
					{{data.rxState ==2?'退费信息确认':'补交'}}
				</div>
				<view class="Refund" v-if="data.rxState ==2">
					<view class="function">
						{{data.infoData.chargingMethod}}
					</view>
					<view class="desc">
						<text>退费说明:</text>
						<uni-easyinput type="textarea" v-model="data.value" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
				<view class="repair" v-if="data.rxState == 3">
					<ul class="repair_ul">
						<li class="repair_title">
							收费信息
						</li>
						<li class="repair_li">
							<text>总金额:</text>￥{{AllMoney}}
						</li>
						<li class="repair_li">
							<text>优惠方式:</text>
							优惠金额<uni-easyinput class="uni-mt-5" @blur="value1Change" v-model="fromData.value1"
								trim="all" placeholder="0.00"></uni-easyinput>元
							<text class="text_margin">折扣</text><uni-easyinput class="uni-mt-5" trim="all"
								@blur="value2Change" v-model="fromData.value2" placeholder="0"></uni-easyinput>
						</li>
						<li class="repair_li">
							应收金额:<text class="red">￥{{money}}</text>
						</li>
						<li class="repair_li">
							<text>欠费金额:</text><uni-easyinput v-model="fromData.value3"
								placeholder="0.00"></uni-easyinput>元
							<uni-data-checkbox multiple @change="value4Change" v-model="fromData.value4"
								:localdata="data.hobby">全部欠费</uni-data-checkbox>
						</li>
						<li class="repair_li">
							<text>备注:</text><uni-easyinput v-model="fromData.value5"
								placeholder="请输入备注"></uni-easyinput>
						</li>
					</ul>
				</view>
				<view class="Method_title" v-if="data.rxState ==2">
					退款方式
				</view>
				<view class="RefundMethod">
					<view class="Method_title" v-if="data.rxState ==3">
						支付方式
					</view>
					<ul class="pay_ul">
						<li :class="['pay_li',{'active':data.payId == item.id}]" v-for="item in data.payList"
							:key="item.id" @click="data.payId = item.id">
							{{item.name}}
						</li>
					</ul>
				</view>
				<view class="popup_btn">
					<view class="close" @click="popup.close()">
						取消
					</view>
					<view class="enter" @click="enterPay(data.rxState)">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		getListApi,
		getDetailApi,
		refundOrder,
		refund
	} from "@/api/retailrecords/index.js"
	import {
		setplaceAnOrderApi,
		settlement
	} from "@/api/retail/index.js"
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from "vue"
	const popup = ref()
	const data = reactive({
		rxState: 2,
		payId: '',
		infoData: {},
		searchValue: '',
		activeItem: '1',
		activeItemName: '删除',
		scrollTop: 0,
		navList: [{
				name: '挂单',
				id: 1
			},
			{
				name: '已收费',
				id: 2
			},
			{
				name: '欠费',
				id: 3
			},
			{
				name: '已退费',
				id: 4
			},
		],
		dataList: [],
		total: 0,
		pageSize: 12,
		current: 1,
		refundQuery: {},
		settlement: {},
		payList: [{
				name: '现金',
				id: 1,
			},
			{
				name: '支付宝',
				id: 2,
			},
			{
				name: '微信',
				id: 3,
			},
			{
				name: '银行卡',
				id: 4,
			},
			{
				name: '商保',
				id: 5,
			},
			{
				name: '其他',
				id: 6,
			}
		],
		hobby: [{
			text: '全部欠费',
			value: 0
		}],
	})
	const fromData = reactive({
		value1: '',
		value2: '',
		value3: '',
		value4: [],
		value5: '',
	})
	const money = ref(0)
	let AllMoney = computed(() => {
		let num = 0
		data.dataList.forEach(item => {
			num += (item.pric * item.sinDoscnt)
		})
		money.value = num
		return num == NaN ? 0 : num
	})
	onMounted(() => {
		getDataList()
	})
	// 获取列表数据
	const getDataList = async () => {
		let query = {
			current: data.current,
			size: data.pageSize,
			searchKey: data.searchValue,
			rxState: data.activeItem
		}
		await getListApi(query).then((res) => {
			if (res.code == 200) {
				console.log(res);
				data.dataList = res.data.records
				data.total = res.data.total
			}
		})
	}
	// 切换类型导航
	const navChange = (id) => {
		data.activeItem = id
		data.current = 1
		getDataList()
	}
	let lower = () => {

	}
	let scroll = () => {

	}
	let filterClass = (status) => {
		if (status == 1) {
			data.activeItemName = '删除'
			return 'outpatient'
		} else if (status == 2) {
			data.activeItemName = '退费'
			return 'retail'
		} else if (status == 3) {
			data.activeItemName = '补交'
			return 'red'
		} else return 'fast'
	}
	// 进入详情页
	const routerLink = (row) => {
		if (row.rxState == 1) {
			uni.navigateTo({
				url: `/pages/retail/index?id=${row.prescriptionId}`,
				animationType: 'pop-in',
				animationDuration: 200
			})
		} else {
			uni.navigateTo({
				url: `/pages/retailrecords/details?id=${row.prescriptionId}&rxState=${row.rxState}`,
				animationType: 'pop-in',
				animationDuration: 200
			})
		}

	}
	const value1Change = () => {
		if (fromData.value1) {
			fromData.value2 = ''
		}
		if (fromData.value1 > AllMoney.value) {
			fromData.value1 = AllMoney.value
			money.value = 0
		} else {
			money.value = AllMoney.value - fromData.value1
		}
	}
	const value2Change = () => {
		if (fromData.value2) {
			fromData.value1 = ''
		}
		money.value = AllMoney.value * (fromData.value2 / 10)
	}
	const value4Change = () => {
		if (fromData.value4.length > 0) fromData.value3 = AllMoney.value
		else fromData.value3 = ''
	}
	const settlementFn = async (item) => {
		data.rxState = item.rxState
		data.infoData = item

		if (item.rxState == 2) {
			let res = await refundOrder({
				id: item.prescriptionId
			})
			if (res.code == 200) {
				data.refundQuery = {
					OriginalOrderNumber: res.data.originalOrderNumber,
					Settlement: res.data.settlement,
					prescriptionDetails: res.data.prescriptionDetails
				}
				popup.value.open('bottom')
			} else {
				uni.showToast({
					duration: 2000,
					title: res.msg,
					icon: 'error'
				})
			}
		} else {
			let patient = ''
			let prescriptionDetails = []
			let res = await getDetailApi({
				id: item.prescriptionId
			})
			if (res.code == 200) {
				patient = res.data.patient
				prescriptionDetails = res.data.prescriptionDetails
			}
			let res1 = await setplaceAnOrderApi({
				patient,
				prescriptionDetails
			})
			if (res1.code == 200) {
				data.settlement = res1.data
				popup.value.open('bottom')
			} else {
				uni.showToast({
					duration: 2000,
					title: res.msg,
					icon: 'error'
				})
			}
		}
	}
	const enterPay = async (state) => {
		if (state == 2) {
			if (!data.payId) {
				uni.showToast({
					duration: 2000,
					title: "请选择退款方式",
					icon: 'error'
				})
				return
			}
			let res = await refund(data.refundQuery)
			if (res.code == 200) {
				uni.showToast({
					duration: 2000,
					title: res.msg,
					icon: 'success'
				})
				data.payId = ''
				popup.value.close()
			} else {
				uni.showToast({
					duration: 2000,
					title: res.msg,
					icon: 'error'
				})
			}
		} else {
			let res = await settlement(data.settlement)
			if (res.code == 200) {
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'success'
				})
				popup.value.close()
				fromData.value1 = ''
				fromData.value2 = ''
				fromData.value3 = ''
				fromData.value4 = []
				fromData.value5 = ''
			} else {
				uni.showToast({
					title: res.msg,
					duration: 1500,
					icon: 'error'
				})
			}
		}


	}
</script>

<style lang="scss" scoped>
	.retailrecords {
		width: 100%;
		height: 100vh;
		background-color: #f3f3f3;

		.navbar {
			margin-top: 10rpx;
			background-color: #ffffff;
			box-shadow: 0rpx 3rpx 5rpx 0rpx #ccc;
			display: flex;
			align-items: center;
			height: 80rpx;

			.navbar_item {
				width: 33.3%;
				line-height: 80rpx;
				text-align: center;
				font-size: 26rpx;
				border-bottom: 5rpx solid transparent;
			}

			.active {
				color: #1989fa;
				border-bottom: 5rpx solid #1989fa;
			}
		}

		.scroll_Y {
			width: 100%;
			margin-top: 6rpx;

			.scroll-view-item {
				background-color: #fff;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				margin-bottom: 15rpx;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.userInfo {
					.user_title {
						font-size: 32rpx;
						font-weight: 500;
					}

					.time {
						margin-top: 10rpx;
						color: #888888;

						text {
							&:last-child {
								margin-left: 10rpx;
							}
						}
					}
				}

				.money_box {
					min-width: 120rpx;
					text-align: right;

					.money {
						color: red;
						font-size: 26rpx;
					}
				}


				.status {
					color: #fff;
					text-align: center;
					width: 110rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 8rpx;
					margin-top: 10rpx;
				}

				.outpatient {
					background-color: #e6a23c;
				}

				.retail {
					background-color: red;
				}

				.red {
					background-color: #07c160;
				}

				.fast {
					display: none;
				}
			}
		}

		::v-deep .pay {
			.popup-content {
				min-height: 50vh;
				background-color: #fff;
				border-radius: 15rpx 15rpx 0rpx 0rpx;
				position: relative;
				padding-bottom: 110rpx;

				.popup_title {
					font-size: 28rpx;
					display: flex;
					height: 80rpx;
					align-items: center;
					justify-content: center;
					border-radius: 15rpx 15rpx 0rpx 0rpx;
					position: relative;
					border-bottom: 1rpx solid #f6f6f6;
				}

				.Refund {
					padding: 0rpx 20rpx;
					box-sizing: border-box;

					.function {
						font-size: 26rpx;
						line-height: 75rpx;
						border-bottom: 1rpx #f6f6f6 solid;

						text {
							margin-right: 10rpx;
						}
					}

					.desc {
						font-size: 26rpx;
						padding: 20rpx 0rpx;
						box-sizing: border-box;
						display: flex;

						text {
							margin-right: 10rpx;
						}
					}
				}

				.repair {
					padding: 0rpx 20rpx;
					box-sizing: border-box;

					.repair_ul {

						.repair_title,
						.repair_li {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							line-height: 75rpx;
							border-bottom: 1rpx #f6f6f6 solid;

						}

						.repair_title {
							color: #409eff;
						}

						.repair_li {
							&:nth-child(3) {
								.uni-easyinput {
									margin-right: 15rpx;
									flex: unset;
									width: 100rpx;

									.uni-easyinput__content-input {
										height: 50rpx;
									}

									.is-input-border {
										border: unset;
									}
								}

								.text_margin {
									padding: 0rpx 15rpx;
								}

								// picker {
								// 	width: 100rpx;
								// 	line-height: 70rpx;
								// 	border-bottom: 1rpx #ccc solid;
								// }
							}

							&:nth-child(5) {
								.uni-easyinput {
									margin: 0rpx 15rpx;
									flex: unset;
									width: 150rpx;

									.uni-easyinput__content-input {
										height: 50rpx;
									}
								}

								label {
									margin-left: 30rpx;

									checkbox {
										transform: scale(0.8);
									}
								}
							}

							&:last-child {
								.uni-easyinput {
									margin: 0rpx 15rpx;

									.uni-easyinput__content-input {
										height: 50rpx;
									}
								}

								border-bottom: none
							}
						}

					}
				}

				.Method_title {
					line-height: 60rpx;
					font-size: 26rpx;
					padding-left: 20rpx;
					background-color: #f6f6f6;
				}

				.RefundMethod {
					.Method_title {
						color: #409eff;
						background-color: #fff;
					}

					.pay_ul {
						padding: 0rpx 20rpx;
						box-sizing: border-box;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.pay_li {
							width: 28%;
							border: 1rpx #f6f6f6 solid;
							border-radius: 10rpx;
							line-height: 60rpx;
							font-size: 26rpx;
							text-align: center;
							margin-top: 15rpx;
						}

						.active {
							border: 1rpx #409eff solid;
						}
					}
				}

				.popup_btn {
					width: 100%;
					position: absolute;
					bottom: 0rpx;
					left: 0rpx;
					background-color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					border-top: 1rpx solid #f1f1f1;
					padding: 15rpx 0rpx;

					view {
						width: 45%;
						font-size: 28rpx;
						line-height: 70rpx;
						text-align: center;
						border: 1rpx solid #409eff;
					}

					.close {
						color: #409eff;
					}

					.enter {
						color: #fff;
						background-color: #409eff;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>